<template>
  <a-row :gutter="20">
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url2"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-subTitle subTitle-4">{{shipObj.tradeMoney}}</p>
          <p class="gutter-title">贸易利润
            <a-tooltip>
              <template #title>这是贸易利润的解释</template>
              <QuestionCircleOutlined/>
            </a-tooltip>
          </p>
        </div>
      </div>
    </a-col>
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url3"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-subTitle subTitle-1">{{shipObj.yearGoodsWeight}}</p>
          <p class="gutter-title">年度货数
            <a-tooltip>
              <template #title>装载时间为本年度的全部货数</template>
              <QuestionCircleOutlined/>
            </a-tooltip>
          </p>

        </div>
      </div>
    </a-col>
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url1"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-subTitle subTitle-2">{{shipObj.schemeOperateCountAvg}}</p>
          <p class="gutter-title">方案平均优化次数
            <a-tooltip>
              <template #title>方案实际优化次数/方案数，保留一位小数</template>
              <QuestionCircleOutlined/>
            </a-tooltip>
          </p>
        </div>

      </div>
    </a-col>
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url5"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-subTitle subTitle-3">{{shipObj.schemeOperateCount}}</p>
          <p class="gutter-title">方案实际优化次数
            <a-tooltip>
              <template #title>点击发布，同步至船货排布中的次数</template>
              <QuestionCircleOutlined/>
            </a-tooltip>
          </p>

        </div>
      </div>
    </a-col>
    <a-col class="gutter-row">
      <div class="gutter-box">
        <div class="gutter-right">
          <a-image
              :preview="false"
              :width="72"
              :src="url4"
          />
        </div>
        <div class="gutter-left">
          <p class="gutter-subTitle subTitle-5">{{shipObj.transportFinishWeight}}</p>
          <p class="gutter-title">已完成运输（万吨）
            <a-tooltip>
              <template #title>船货状态为已完成的实际装载量</template>
              <QuestionCircleOutlined/>
            </a-tooltip>
          </p>
        </div>
      </div>
    </a-col>
    <a-col class="gutter-row">
      <div class="gutter-ring">
        <div class="ring-left">
          <RingChart :chartData="shipObj.resourceSideRate"/>
        </div>
        <div class="ring-right">
          <p class="gutter-title">资源方占比
            <a-tooltip>
              <template #title>年度资源方货数分布图</template>
              <QuestionCircleOutlined/>
            </a-tooltip>
          </p>
<!--          <div class="gutter-list">-->
<!--            <div class="gutter-item" v-for="(item, index) in shipObj.resourceSideRate" :key="index">-->
<!--              <div class="item-title">-->
<!--                <div class="title-circle"></div>-->
<!--                <div>{{item.sourceName}}</div>-->
<!--              </div>-->
<!--              <div class="item-val">{{item.sourceRate?`${item.sourceRate}%`: ''}}</div>-->
<!--            </div>-->
<!--          </div>-->
        </div>

      </div>

    </a-col>
  </a-row>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref} from "vue";
import {QuestionCircleOutlined} from "@ant-design/icons-vue";
import RingChart from "@/pages/LngArrangement/components/ArrangementCard/RingChart.vue";
const url1 = require('../../../../assets/images/LngArrangement/lngArgCard1.jpg')
const url2 = require('../../../../assets/images/LngArrangement/lngArgCard2.png')
const url3 = require('../../../../assets/images/LngArrangement/lngArgCard3.png')
const url4 = require('../../../../assets/images/LngArrangement/lngArgCard4.png')
const url5 = require('../../../../assets/images/LngArrangement/lngArgCard5.png')
const { proxy  } = getCurrentInstance()
const shipObj = ref({})
const getData = () => {
  proxy.$api.getShipArrangeStatiscs().then(res => {
    console.log('卡片信息', res)
    shipObj.value = res.resultObject
  })
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.gutter-row {
  width: 16.66%;
}
.gutter-ring {
  background: #fff;
  height: 100%;
  //display: flex;
  //justify-content: space-between;
  background: url("../../../../assets/images/LngArrangement/card-bg.jpg")no-repeat;
  background-size: 100% 100%;
  .ring-left {
    width: 100%;
    //background: #F4FBFF;
    //border-radius: 50%;
    padding-top: 15px;
  }
  .ring-right {
    width: 100%;
    .gutter-title {
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      color: #2c3749;
      margin-top: 10px;
    }
    .gutter-list {
      margin-right: 10px;
      .gutter-item {
        margin-bottom: 18px;
        display: flex;
        justify-content: space-between;
        .item-title {
          font-size: 12px;
          font-weight: 400;
          text-align: left;
          color: #494e5b;
          display: flex;
          .title-circle {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #4A8BFE;
            margin-top: 6px;
            margin-right: 5px;
          }
        }
        .item-val {
          font-size: 14px;
          font-weight: 500;
          text-align: left;
          color: #2c3749;
          line-height: 20px;
        }
      }
    }
  }
}
.gutter-box {
  padding: 35px 0;
  //display: flex;
  // background: #ffffff;
  text-align: center;
  background: url("../../../../assets/images/LngArrangement/card-bg.jpg")no-repeat;
  background-size: 100% 100%;
  .gutter-left {
   // margin-left: 20px;
    .gutter-title {
       font-size: 14px;
       color: #2C3749;
       width: 100%;
    }
    .gutter-subTitle {
      font-size: 52px;
      font-weight: bold;
      color: #2C3749;
      margin-bottom: 0.5rem;
    }
    .subTitle-1{
      color: #6A73FF;
    }
    .subTitle-2{
      color: #0062FF;
    }
    .subTitle-3{
      color: #FA6400;
    }
    .subTitle-4{
      color: #F7B500;
    }
    .subTitle-5{
      color: #44D7B6;
    }
  }
  .gutter-right {
    width: 72px;
    height: 72px;
    display: none;
  }
}
@media screen and (min-width:1360px) and (max-width:1440px){
  .gutter-row {
    //width: 33.3%;
    //margin-bottom: 20px;
  }
}
</style>
